<template>
  <el-container>
    <el-header>
      <router-link to="/note/editor"><el-button type="success" style="float: left; margin-left: 100px">写笔记</el-button></router-link>
      <el-input
          placeholder="搜索笔记"
          v-model="keyword"
          :prefix-icon="Search"
          style="width: 300px;position: absolute;"
          @change="searchNote"
      />
    </el-header>
    <el-main>
      <el-card style="margin-left: 100px; margin-right: 100px">
        <div v-for="note in notes" :key="note.id">
          <router-link :to="{path: '/note/details', query:{id: note.id}}">
            <div style="float: left;width: 85%;height: 150px">
              <span style="font-size: 20px"><strong>{{ note.title }}</strong></span>
              <el-divider content-position="left">{{ note.createDate }}</el-divider>
              <p>{{ note.abs }}</p>
            </div>
            <el-image style="margin: 18px 0 0 30px; width: 100px; height: 80px" :src="note.cover" fit="cover"></el-image>
            <el-divider></el-divider>
          </router-link>
        </div>
      </el-card>
    </el-main>
  </el-container>
  <el-pagination
      v-model:currentPage="currentPage3"
      :page-size="10"
      layout="prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
    >
  </el-pagination>
</template>

<script>
import { ref } from 'vue'
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from 'element-plus'

export default {
  name: "HomeNote",
  data() {
    return {
      notes : [],
      page: 1,
      size: 10,
      total: 0,
      currentPage3: ref(1),
      Search,
      keyword: ''
    }
  },
  mounted() {
    this.loadNote()
  },
  methods: {
    loadNote() {
      let _this = this
      this.$axios.get("note/page", {params:{page: this.page, size: this.size}})
      .then(success => {
        if (success.data.code === 200) {
          _this.notes = success.data.data.list
          _this.total = success.data.data.total
          console.log(success.data.data.list);
        } else {
          ElMessage ({
            message: success.data.message,
            type: 'error'
          })
          // alert(success.data.message)
        }
      })
      .catch(fail => {
        console.log(fail);
      })
    },
    handleCurrentChange(page) {
      this.page = page
      if (this.keyword.length === 0) {
        this.loadNote()
      } else {
        this.searchNote()
      }
    },
    searchNote(){
      if (this.keyword.length === 0) {
        this.loadNote()
        return
      }
      let _this = this
      this.page = 1
      this.$axios.get("note/search", {params:{keyword: this.keyword, page: this.page, size: this.size}})
          .then(success => {
            if (success.data.code === 200) {
              _this.notes = success.data.data.list
              _this.total = success.data.data.total
              console.log(success.data.data.list);
            } else {
              ElMessage ({
                message: success.data.message,
                type: 'error'
              })
            }
          })
          .catch(fail => {
            console.log(fail);
          })
    }
  }
}
</script>

<style scoped>
.line {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--el-border-color-base);
}
</style>